<template>
  <div class="">
    <Box>
      <div slot="box">
        <a-form-model ref="ruleForm2"  layout="inline" :model="data">
          <a-form-model-item label="案事件类型" prop="type">
            <a-select v-model="data.type" style="width:200px" @change="handleChange1">
              <a-select-option value="">
                全部
              </a-select-option>
              <a-select-option value="命案防控">
                命案防控
              </a-select-option>
              <a-select-option value="线路案事件">
                线路案事件
              </a-select-option>
              <a-select-option value="师生安全案事件">
                师生安全案事件
              </a-select-option>
              <a-select-option value="矛盾纠纷">
                矛盾纠纷
              </a-select-option>
              <a-select-option value="重特大案事件">
                重特大案事件
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="案事件名称" prop="name">
            <a-input placeholder="请输入" v-model="data.name"/>
          </a-form-model-item>
          <a-form-model-item label="发生日期" prop="date" >
            <a-date-picker v-model="data.date" @change="onChange" :format="dateFormat"/>
          </a-form-model-item>
        </a-form-model>
        <a-form-model ref="ruleForm1"  layout="inline" :model="data">
          <a-form-model-item label="状态" prop="state">
            <a-radio-group v-model="value" @change="onChange1">
              <a-radio :value="1">
                全部
              </a-radio>
              <a-radio :value="2">
                进行中
              </a-radio>
              <a-radio :value="3">
                已完结
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-form-model>
        <a-form-model ref="ruleForm"  layout="inline" :model="data">
          <a-form-model-item >
            <a-button type="primary" @click="query">查询</a-button>
            <a-button style="margin-left: 10px;" @click="resetForm">重置</a-button>
            <a-button style="margin-left: 10px;" @click="shangbao">事件上报</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </Box>
    <Box>
      <div slot="box">
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :dataSource="table"
          :showSelection="false"
          :showPagination="true"
          :customRow="clickCustomRow"
          rowKey="id"
          :loading="loading"
          @change="onTableChange"
        >
          <template slot="caozuo" slot-scope="text, record">
            <div style="display: flex;justify-content: center;">
              <a href="javascript:;" @click="listLoook(record)">查看</a>&emsp;
              <j-select-user-by-dep v-if="record.state != '已完结' && userIdentity" :multi="false" :item="true"></j-select-user-by-dep>
            </div>
          </template>
        </CustomTable>

      </div>
    </Box>
    <div>
      <a-modal v-model="visible" title="详细信息" @ok="handleOk" width="600px" centered>
        <Types ref="types"></Types>
      </a-modal>
    </div>
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import Box from '@views/xlgc/Box'
import { getDictItemsFromCache } from '@api/api'
import { getAllList } from '@api/xlgc/staging'
import Types from '@views/xlgc/varied/Types'
import JSelectUserByDep from '../../../lawCase/LifeCase/details/JSelectUserByDep'
import Vue from "vue";
import {USER_AUTH, USER_INFO, USER_NAME} from "@/store/mutation-types";
export default {
  name: 'List',
  components: { CustomTable, Box, Types ,JSelectUserByDep },
  data() {
    return {
      visible: false,
      value: '',
      dateFormat: 'YYYY-MM-DD',
      data: {
        type: '',
        name: '',
        date: '',
        state: ''
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '案(事)件名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '案(事)件类型',
          dataIndex: 'mainTypes',
          scopedSlots: { customRender: 'mainTypes' }
        },
        {
          title: '发生地点',
          dataIndex: 'place',
          scopedSlots: { customRender: 'place' }
          // customRender: (text,record) => {
          //   //字典值翻译通用方法
          //   return this.filterMultiDictText('cases_level', text)
          // }
        },
        {
          title: '发生日期',
          dataIndex: 'date',
          scopedSlots: { customRender: 'date' }
        },
        {
          title: '状态',
          // width: 90,
          align: 'center',
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' }
        },
        {
          title:'操作',
          align: 'center',
          dataIndex: 'caozuo',
          scopedSlots: { customRender: 'caozuo' }
        }
      ],
      pageData: {},
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      table: {},
      userIdentity:false
    }
  },
  mounted() {
    let user = Vue.ls.get(USER_INFO)
    console.log(user)
    this.userIdentity = user.userIdentity === 2
    this.refreshTable(this.pageFilter)
  },
  methods: {
    listLoook(val) {
      console.log(val)
      let item = ''
      if (val.mainTypes == '命案防控') item = 'Mi'
      if (val.mainTypes == '矛盾纠纷') item = 'Ma'
      if (val.mainTypes == '线路案事件') item = 'Xi'
      if (val.mainTypes == '师生安全案事件') item = 'Te'
      if (val.mainTypes == '重特大案事件') item = 'Zh'
      if (item != '') {
        this.$router.push({
          path: '/LifeCase/detailed',
          query: {
            // processStatus: val.processStatus,
            // situation: 'ME',
            itemId:val.mainTypes,
            item: item,
            id: val.id,
            // caozuo: val
          }
        })
      } else {
        this.$message.error('出现了意料之外的错误')
      }
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.$refs.ruleForm1.resetFields();
      this.$refs.ruleForm2.resetFields();
      this.refreshTable(this.pageFilter)
    },
    handleOk() {
      this.$refs.types.turnRound()
    },
    shangbao() {
      this.visible = true
    },

    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable(Object.assign({}, this.pageFilter, this.data))
    },
    clickCustomRow(record, index) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {
            console.log(record)
            this.$emit('clickRow', record)
          }
        }
      }
    },
    chongzhi() {
      this.refreshTable(this.pageFilter)
    },
    query() {
      this.refreshTable(Object.assign({}, this.pageFilter, this.data))
      console.log(Object.assign({}, this.pageFilter, this.data))
    },
    refreshTable(val) {
      this.loading = true
      getAllList(val)
        .then(res => {
          console.log(res)
          if (res.success) {
            this.table = res.result
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },

    onChange1(e) {
      console.log(e.target.value)
      if (e.target.value == '1') {
        this.data.state = ''
      } if (e.target.value == '2') {
        this.data.state = '进行中'
      } if (e.target.value == '3') {
        this.data.state = '已完结'
      }
    },
    onChange(date, dateString) {
      this.data.date = dateString
    },
    handleChange1(val) {
      this.data.type = val
      return val
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    }
  }
}
</script>

<style scoped>
/*.gutter-row{*/
/*  display: flex;*/
/*  align-items: center;*/
/*}*/
</style>
